<template>
	<view>
		<view class="admin_box">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<image class="avatar" @click="tn('/pages_sub/setUserinfo/setUserinfo')"
					:src="userInfo.avatar||'http://static.playlet.5884.cn/playlet/img/my/avatar.png'" />
				<view class="tn-margin-xs">
					<view class="flex_nickname">
						<view class="tn-text-bold tn-text-xxl">{{userInfo.nickname||'游客'}}</view>
					</view>
					<view class="dm-color-gray tn-margin-xs tn-text-sm" @click="copyText(userInfo.my_invite_code)">
						我的邀请码：{{userInfo.my_invite_code||"未登录"}}
						<text class="tn-icon-copy tn-margin-left">复制</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common_mixin from '@/libs/mixin/common_mixin.js'
	/* 用户头像 和用户名 邀请码信息*/
	export default {
		mixins: [common_mixin],
		name: "topUserInfo",
		data() {
			return {
				userInfo: this.vuex_user
			};
		},
		props: [],
		created() {
			this.userInfo = this.vuex_user
			this.userInfo.nickname = this.userInfo.nickname?this.userInfo.nickname.slice(0, 6):'游客';
			if(this.userInfo.mobile){
				this.userInfo.nickname += '('+this.userInfo.mobile+')';
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 80rpx;
	}

	.admin_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}

	.flex_nickname {
		display: flex;
		align-items: center;
		width: 380rpx;
	}
</style>